<script setup lang="ts">
import { ref } from 'vue'

defineProps<{
  options: {
    label: string
    value: number
  }[]
  modelValue: number
}>()
type emitType = {
  (e: 'update:modelValue', n: number): void
}
const emit = defineEmits<emitType>()

// active 记录的 是当前 的 value 值
</script>

<template>
  <div class="test-page">
    {{ modelValue }}
    <div class="parent">
      <div :class="['box', { active: modelValue === item.value }]" @click="emit('update:modelValue', item.value)"
        v-for="item in options" :key="item.value">
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.parent {
  display: flex;
  justify-content: space-evenly;

  .box {
    width: 20%;

    line-height: 55px;
    text-align: center;
    margin: 30px 0;

    &.active {
      border: 1px solid cyan;
    }
  }
}
</style>
